<template>
  <div class="login-container">
    <div class="login-background">
      <div class="login-overlay"></div>
    </div>
    <div class="login-content">
      <div class="login-form-container">
        <div class="login-header">
          <!-- <img src="@/assets/images/logo.png" class="login-logo" alt="Logo" /> -->
          <h1 class="login-title">图书馆管理系统</h1>
        </div>
        
        <el-form 
          ref="loginForm" 
          class="login-form" 
          :model="loginForm" 
          :rules="rules"
        >
          <div class="welcome-text">
            <h2>欢迎使用</h2>
            <p>请登录您的账号</p>
          </div>
          
          <el-form-item prop="username">
            <el-input 
              v-model="loginForm.username" 
              placeholder="请输入用户名"
              prefix-icon="el-icon-user"
              size="medium"
            />
          </el-form-item>
          
          <el-form-item prop="password">
            <el-input 
              v-model="loginForm.password" 
              type="password" 
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              show-password
              size="medium"
            />
          </el-form-item>
          
          <el-form-item prop="userType" class="user-type-selector">
            <el-radio-group v-model="loginForm.userType">
              <el-radio :label="0">读者</el-radio>
              <el-radio :label="1">管理员</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item>
            <el-button 
              type="primary" 
              class="login-button" 
              :loading="loading"
              @click="onSubmit"
              size="medium"
            >
              {{ loading ? '登录中...' : '登 录' }}
            </el-button>
          </el-form-item>
          
          <div class="form-footer">
            <span class="register-link" @click="registerBtn">读者注册</span>
          </div>
        </el-form>
      </div>
      
      <div class="login-info">
        <div class="info-content">
          <div class="info-header">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </div>
          <h2>图书馆管理系统</h2>
          <p>便捷、高效的图书管理平台</p>
          <ul class="feature-list">
            <li><div class="icon-circle"><i class="el-icon-reading"></i></div> 海量图书资源</li>
            <li><div class="icon-circle"><i class="el-icon-document"></i></div> 便捷借阅流程</li>
            <li><div class="icon-circle"><i class="el-icon-data-analysis"></i></div> 智能管理系统</li>
          </ul>
          <div class="info-footer">
            <div class="pattern"></div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 注册弹框 -->
    <sys-dialog 
      :title="dialog.title" 
      :width="dialog.width" 
      :height="dialog.height" 
      :visible="dialog.visible"
      @onClose="onClose" 
      @onConfirm="onConfirm"
    >
      <div slot="content">
        <el-form 
          ref="addRef" 
          :model="addModel" 
          :rules="registeRules" 
          label-width="80px"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="learnNum" label="姓名">
                <el-input v-model="addModel.learnNum" placeholder="请输入姓名" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="phone" label="电话">
                <el-input v-model="addModel.phone" maxlength="11" placeholder="请输入电话号码" size="small" />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="username" label="学号">
                <el-input v-model="addModel.username" placeholder="请输入学号" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="className" label="班级">
                <el-input v-model="addModel.className" placeholder="请输入班级" size="small" />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="idCard" label="身份证">
                <el-input v-model="addModel.idCard" maxlength="18" placeholder="请输入身份证号" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="password" label="密码">
                <el-input v-model="addModel.password" type="password" placeholder="请输入密码" show-password size="small" />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="confirmPassword" label="确认密码">
                <el-input v-model="addModel.confirmPassword" type="password" placeholder="请再次输入密码" show-password size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别">
                <el-radio-group v-model="addModel.sex">
                  <el-radio :label="'0'">男</el-radio>
                  <el-radio :label="'1'">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </sys-dialog>
  </div>
</template>

<script>
import { setUserType } from '@/utils/auth'
import { registerApi } from '@/api/reader'
import SysDialog from '@/components/dialog/SysDialog.vue'

export default {
  components: {
    SysDialog
  },
  data() {
    return {
      registeRules: {
        learnNum: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
        username: [{ required: true, message: '请填写学号', trigger: 'blur' }],
        idCard: [
          { required: true, message: '请填写身份证号', trigger: 'blur' }
        ],
        phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, required: true, message: '请输入正确的手机号码', trigger: 'blur' }],
        password: [{ required: true, message: '请填写密码', trigger: 'blur' }],
        confirmPassword: [
          { required: true, message: '请填写确认密码', trigger: 'blur' }
        ],
        className: [{ required: true, message: '请填写班级', trigger: 'blur' }]
      },
      // 表单属性
      addModel: {
        type: '',
        readerId: '',
        learnNum: '',
        username: '',
        idCard: '',
        sex: '',
        phone: '',
        password: '',
        confirmPassword: '',
        className: ''
      },
      loading: false,
      dialog: {
        title: '读者注册',
        width: 650,
        height: 280,
        visible: false
      },
      // 登录表单绑定数据源
      loginForm: {
        username: '',
        password: '',
        userType: 0 // 0：读者  1： 管理员
      },
      // 表单验证规则
      rules: {
        username: [
          {
            trigger: 'blur',
            required: true,
            message: '请输入用户名'
          }
        ],
        password: [
          {
            trigger: 'blur',
            required: true,
            message: '请输入密码'
          }
        ],
        userType: [
          {
            trigger: 'change',
            required: true,
            message: '请选择用户类型'
          }
        ]
      }
    }
  },
  methods: {
    onClose() {
      this.dialog.visible = false
    },
    onConfirm() {
      if (this.addModel.confirmPassword != this.addModel.password) {
        this.$message.warning('两次密码不一致!')
        return
      }
      this.$refs.addRef.validate(async (valid) => {
        if (valid) {
          const res = await registerApi(this.addModel)
          if (res && res.code == 200) {
            this.$message.success(res.msg)
            this.dialog.visible = false
          }
        }
      })
    },
    // 读者注册
    registerBtn() {
      // 清空表单
      this.$resetForm('addRef', this.addModel)
      this.dialog.visible = true
    },
    // 登录提交事件
    onSubmit() {
      // 表单验证
      this.$refs.loginForm.validate((valid) => {
        // 验证通过才提交表单
        if (valid) {
          this.loading = true
          setUserType(this.loginForm.userType)
          // 调用store里面的login方法
          this.$store
            .dispatch('user/login', this.loginForm)
            .then(() => {
              // 跳转路由
              this.$router.push({ path: this.redirect || '/' })
              this.loading = false
            })
            .catch((e) => {
              this.loading = false
              console.log(e)
              if (e.response == undefined || e.response.data == undefined) {
                this.$message({
                  showClose: true,
                  message: e,
                  type: "error",
                  duration: 5000
                })
              } else {
                this.$message({
                  showClose: true,
                  message: e.response.data,
                  type: "error",
                  duration: 5000
                })
              }
            })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f2f5;
}

.login-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../../assets/images/background.jpg") no-repeat center center;
  background-size: cover;
  z-index: 0;
}

.login-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
}

.login-content {
  position: relative;
  z-index: 1;
  display: flex;
  width: 950px;
  height: 580px;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.login-form-container {
  width: 50%;
  padding: 40px;
  display: flex;
  flex-direction: column;
}

.login-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  
  .login-logo {
    width: 44px;
    height: 44px;
    margin-right: 14px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
  }
  
  .login-title {
    font-size: 22px;
    font-weight: 600;
    color: #1890ff;
    margin: 0;
    letter-spacing: 0.5px;
  }
}

.login-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  
  .welcome-text {
    margin-bottom: 28px;
    
    h2 {
      font-size: 24px;
      font-weight: 600;
      margin: 0 0 8px;
      color: #262626;
      letter-spacing: 0.5px;
    }
    
    p {
      font-size: 15px;
      color: #595959;
      margin: 0;
      letter-spacing: 0.3px;
    }
  }
  
  .el-input {
    >>> .el-input__inner {
      height: 42px;
      line-height: 42px;
      padding-left: 44px;
      border-radius: 8px;
      background-color: #f5f7fa;
      border: 1px solid #f5f7fa;
      font-size: 14px;
      transition: all 0.3s;
      
      &:focus {
        border-color: #1890ff;
        background-color: #fff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
      }
    }
    
    >>> .el-input__prefix {
      left: 15px;
      color: #8c8c8c;
    }
  }
  
  .user-type-selector {
    margin: 5px 0 24px;
  }
  
  .login-button {
    width: 100%;
    height: 42px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
    transition: all 0.3s;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(24, 144, 255, 0.25);
    }
    
    &:active {
      transform: translateY(0);
      box-shadow: 0 4px 8px rgba(24, 144, 255, 0.15);
    }
  }
  
  .form-footer {
    text-align: center;
    margin-top: auto;
    
    .register-link {
      font-size: 14px;
      color: #1890ff;
      cursor: pointer;
      transition: all 0.2s;
      font-weight: 500;
      
      &:hover {
        color: #40a9ff;
        text-decoration: underline;
      }
    }
  }
}

.login-info {
  width: 50%;
  background: linear-gradient(135deg, #1890ff, #096dd9);
  padding: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
  }
  
  &::after {
    content: '';
    position: absolute;
    bottom: -70px;
    left: -70px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
  }
  
  .info-content {
    position: relative;
    z-index: 1;
    max-width: 360px;
    padding: 40px;
    
    .info-header {
      display: flex;
      align-items: center;
      margin-bottom: 26px;
      
      .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: #fff;
        margin-right: 7px;
        opacity: 0.8;
      }
    }
    
    h2 {
      font-size: 30px;
      font-weight: 600;
      margin: 0 0 16px;
      letter-spacing: 1px;
    }
    
    p {
      font-size: 17px;
      opacity: 0.9;
      margin-bottom: 36px;
      font-weight: 400;
      letter-spacing: 0.5px;
      line-height: 1.5;
    }
    
    .feature-list {
      list-style: none;
      padding: 0;
      margin: 0 0 40px;
      
      li {
        font-size: 15px;
        margin-bottom: 18px;
        display: flex;
        align-items: center;
        opacity: 0.9;
        letter-spacing: 0.3px;
        
        .icon-circle {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 32px;
          height: 32px;
          background-color: rgba(255, 255, 255, 0.2);
          border-radius: 50%;
          margin-right: 12px;
          
          i {
            font-size: 16px;
          }
        }
      }
    }
    
    .info-footer {
      .pattern {
        height: 3px;
        width: 50px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 2px;
      }
    }
  }
}

@media (max-width: 992px) {
  .login-content {
    width: 90%;
    max-width: 500px;
    height: auto;
  }
  
  .login-info {
    display: none;
  }
  
  .login-form-container {
    width: 100%;
    padding: 30px;
  }
}

@media (max-width: 576px) {
  .login-content {
    width: 95%;
  }
  
  .login-form-container {
    padding: 25px 20px;
  }
}
</style>
